<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" size="small" inline>
      <el-form-item v-hasRole="['admin']" label="部门" prop="deptId">
        <department-select v-model="queryParams.deptId" style="width: 200px" />
      </el-form-item>
      <el-form-item label="日期" prop="name">
        <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="queryParams.date" clearable />
      </el-form-item>
      <el-form-item label="编码" prop="code">
        <el-input v-model="queryParams.code" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          {{ $t("Search") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{
          $t("Reset")
        }}</el-button>
      </el-form-item>
    </el-form>

    <el-form inline>
      <el-form-item>
        <el-button type="primary" @click="groupBarVisible = true">多分组统计图谱(柱状)</el-button>
        <el-button type="primary" @click="valueBarVisible = true">多值统计图谱(柱状)</el-button>
        <!-- </el-form-item> -->
        <!-- <el-form-item> -->
        <!-- <el-button type="primary" @click="groupPieVisible = true">多分组统计图谱(饼图)</el-button> -->
        <!-- <el-button type="primary" @click="valuePieVisible = true">多值统计图谱(饼图)</el-button> -->
      </el-form-item>
    </el-form>
    <el-dialog title="多分组统计图谱" :visible.sync="groupBarVisible" fullscreen>
      <calendar-group-bar />
      <!-- <energy-chart /> -->
    </el-dialog>
    <el-dialog title="多指标统计图谱" :visible.sync="valueBarVisible" fullscreen>
      <calendar-value-bar />
    </el-dialog>

    <el-table v-loading="loading" :data="list">
      <el-table-column label="日期" align="left" prop="date" />
      <!-- <el-table-column label="DeviceId" align="left" prop="deviceId" /> -->
      <el-table-column label="编号" align="left" prop="code" min-width="120" />
      <el-table-column label="能耗" align="left" prop="energy" />
      <el-table-column label="总和能耗" align="left" prop="totalEnergy" />
      <el-table-column label="能耗更新时间" align="left" prop="energyTime" />
      <el-table-column label="在线时长(S)" align="left" prop="onlineSecond" />
      <el-table-column label="在线" align="left" prop="online">
        <template slot-scope="{row}">
          <span>{{ row.online ? '是':'否' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="上/下线时间" align="left" prop="onlineTime" />
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="queryPage" />
  </div>
</template>
<script>
  import deviceCalendarAPI from '@/api/device/calendar'
  import DataEntity from "@/components/DataEntity/DataEntity";
  import DepartmentSelect from "@/views/system/components/DepartmentSelect.vue";
  import EnergyChart from './EnergyChart.vue';
  import CalendarGroupBar from './test/CalendarGroupBar.vue';
  import CalendarValueBar from './test/CalendarBar.vue';
  export default {
    name: 'DeviceCalendarList',
    mixins: [DataEntity],
    components: {
      DepartmentSelect,
      EnergyChart,
      CalendarGroupBar,
      CalendarValueBar
    },
    data() {
      return {
        currentAPI: deviceCalendarAPI,
        currentBaseURL: '/device/calendar/',
        currentCode: 'calendar',
        queryParams: {
          deptId: null,
          date: null,
          code: null
        },
        valueBarVisible: false,
        groupBarVisible: false,
        valuePieVisible: false,
        groupPieVisible: false
      }
    },
    methods: {}
  }

</script>
